<template>
  <div id="app">
    <div id="echart_china" ref="echart_china"></div>
  </div>
</template>
<script>
// import chinamap from "echarts/map/json/china.json";
// import chinamap from "../../assets/xingtaishi.json";
// import hebeiMap from "../../assets/河北省echart.json";
import xingtaiMap from "../../assets/xingtaishi.json";
import _ from "lodash";
import { listConnectionPoint } from '@/api/maintenance/connectionPoint'
import * as echarts from "echarts";

export default {
  data() {
    return {
      myChart: null,
      option: {},
    };
  },
  mounted() {
    listConnectionPoint().then(res => {
      let data = res.rows.map(item => {
        return {
          name: item.connectionPointName,
          value: [item.lon, item.lat, 100]
        }
      })
      // 1. 创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例
      this.myChart = echarts.init(this.$refs.echart_china);
      window.addEventListener('resize', _.debounce(() => {
        this.myChart.resize();
      }, 200));

      this.init(data);
    })
  },
  methods: {
    /*
      显示河北省地图
    */
    init(data) {
      // 2. 注册可用的地图，只在 geo 组件或者map图表类型中使用
      echarts.registerMap("hebei", xingtaiMap); //用导入的json文件注册一个name:hebei的地图组件
      // echarts.registerMap("hebei", xingtaiMap); //用导入的json文件注册一个name:hebei的地图组件
      // 3. 设置图表 option
      this.option = {
        // backgroundColor: "transparent",

        geo: {
          type: "map",
          map: "hebei", //使用 registerMap 注册的地图名称
          roam: false,
          top: 'center', // 调整地图的位置，top:0 表示距离顶部的距离为0
          // 设置河北省的中心点坐标
          // center: [118, 39.4],
          // 设置初始缩放级别，值越大显示越详细
          zoom: 1,
          emphasis: {
            // itemStyle: {
            //   areaColor: '#032D6C'
            // },
            // focus: 'self', // 仅高亮当前区域，淡化其他区域:cite[6]
            // 解决 echarts 5.6 鼠标移上地图变透明的问题
            itemStyle: {
              areaColor: '#032D6C',
              // opacity: 1 // 强制不透明
            }
          },
          // 设置缩放限制，max值设置为较大值可以实现最大显示
          scaleLimit: {
            min: 1,
            max: 20, // 增大最大缩放级别
          },
          label: {
            normal: {
              color: "rgba(255,255,255,.8)",
              show: true,
            },
            emphasis: {
              color: "rgba(255,255,255,.8)"
            },
          },
          itemStyle: {
            areaColor: "#033A7D",
            borderColor: "#2665A9",
          },
        },
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{b}", // 显示地区名称
        },
        series: [
          {
            name: '坐标标注',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: data,
            symbolSize: 12,
            label: {
            },
            itemStyle: {
              normal: {
                color: '#CCC87B' // 标注颜色
              }
            }
          }
        ]
      };
      console.log("option1:", this.option);

      // 只显示一个地图的时候，用option,option2都可以。如果要在地图上加散点图，用 option
      // var option2 = {
      //   series: [
      //     {
      //       type: "map",
      //       map: "hebei", //使用 registerMap 注册的地图名称
      //       label: {
      //         normal: {
      //           color: "#000000",
      //           show: true,
      //         },
      //       },
      //     },
      //   ],
      // };
      // console.log("option2:", option2);

      // 4. 显示地图
      this.myChart.setOption(this.option); // 用 option 和 option2 效果一样
    },
  },
};
</script>
<style scoped lang="scss">
#echart_china {
  width: 100%;
  height: 100%;
  // background-color: ;
}
</style>
